<template>
  <swiper class="indexBanner" ref="mySwiper" :options="swiperOption">
    <swiper-slide v-for="item in bannerList">
		<span :style="{backgroundImage:'url(' + item.image + ')'}"></span>
	</swiper-slide>
    <div class="indexBannerDot" slot="pagination"></div>
  </swiper>
</template>

<script>
  import axios from 'axios'
  import { Swiper, SwiperSlide} from 'vue-awesome-swiper'
  export default {
    name: 'indexBanner',
    data() {
      return {
		bannerList:[
			{
				image:'1'
			},
			{
				image:'2'
			},
			{
				image:'3'
			}
		],
        swiperOption: {
			el:'.indexBanner',
			autoplay:true,
			spaceBetween: 30,
			effect: 'fade',
			pagination: {
				el: '.indexBannerDot',
				clickable: true
			},
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev'
			}
		}
      }
    },
	created() {
		var _this=this
		axios.post('http://vueapitest.aykj.so/api/xcx/picture/pictureList?size=3&location=1&subsiteId=1').then(function(res){
			console.log(res.data.pictureList)
			_this.bannerList = res.data.pictureList
		}).catch(function (error) {
			console.log(error);
		});
	},
    computed: {
      swiper() {
        //return this.$refs.mySwiper.$swiper
      }
    },
    mounted() {
      //console.log('Current Swiper instance object', this.swiper)
      //this.swiper.slideTo(3, 1000, false)
    }
  }
</script>

<style scoped="scoped">
	.indexBanner{ width: 100%; position: absolute; left: 0; top: 0; z-index: 1;height: 726px;}
	.indexBanner .swiper-slide span{display: block;width: 100%;height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover;}
</style>